import React, {Component} from 'react';
import {Card, SearchBar} from "antd-mobile";
import {Link} from "react-router-dom";
import './Search.scss'
import http from "../../util/http";


class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isSearch: false,
            value: '',
            actorList: [],
            movieList: [],
            newsList: [],
        }
    }

    componentDidMount() {
        this.autoFocusInst.focus();
        http.get('api/search', {s: this.state.value}).then(({data}) => {
            if (data.code === 200) {
                this.setState({
                    actorList: data.data.actorList,
                    movieList: data.data.movieList,
                    newsList: data.data.newsList,
                })
            } else {
                alert(data.msg)
            }
        })

    }

    onChange = (value) => {
        const params = {
            s: value
        }

        this.setState({
            value: value
        })

    }

    renActor() {
        return this.state.actorList.map(item => (
            <Link to={`/actorInfo?actorId=${item.actorId}`} key={item.actorId}>
                <Card key={item.actorId}>
                    <Card.Header
                        title={item.actorName}
                        extra={<span>{item.birthday}</span>}
                    />
                    <Card.Body>
                        <div>{item.profile}</div>
                    </Card.Body>
                </Card>
            </Link>
        ))
    }

    renMovie() {
        return this.state.movieList.map(item => (
            <Link to={`/movieInfo?movieId=${item.movieId}`} key={item.movieId}>
                <Card key={item.movieId}>
                    <Card.Header
                        title={item.name}
                        extra={<span>{item.translationName}</span>}
                    />
                    <Card.Body>
                        <div>&nbsp;&nbsp;&nbsp;{item.introduction}</div>
                    </Card.Body>
                    <Card.Footer extra={<div>{item.releaseDate}</div>}/>
                </Card>
            </Link>
        ))
    }

    renNews() {
        return this.state.newsList.map(item => (
            <Link to={`/newsInfo?newsId=${item.newsId}`} key={item.newsId}>
                <Card>
                    <Card.Body>
                        <div className={"NewsList-item"}>
                            <div className="middle">
                                <div className={"test1"}>{item.title}</div>
                                <div className={"test2"}>{item.introduction}</div>
                            </div>
                            <div className="right">
                                <img src={process.env.REACT_APP_BASE_API + "/img/" + item.cover} alt={item.title}
                                     width={"80"} height={"90"} onClick={() => {
                                    this.props.history.push({pathname: "/newsInfo", newsId: item.newsId})
                                }}/>
                            </div>

                        </div>
                    </Card.Body>
                </Card>
            </Link>


        ))
    }

    renderList() {
        return this.state.value.length ?
            (
                <div className={"main"}>
                    <Card full>
                        <Card.Header
                            title="你可能想查找的演员"
                        />
                        <Card.Body>
                            {this.renActor()}
                        </Card.Body>
                    </Card>
                    <Card full>
                        <Card.Header
                            title="热播电影"
                        />
                        <Card.Body>
                            {this.renMovie()}
                        </Card.Body>
                    </Card>
                    <Card full>
                        <Card.Header
                            title="惊爆眼球"
                        />
                        <Card.Body>
                            {this.renNews()}
                        </Card.Body>
                    </Card>
                </div>

            ) : <></>
    }


    render() {
        // const actorList =
        // const movieList =
        // const newsList =
        return (
            <div className={"Search"}>
                <div className={"header"}>
                    <SearchBar
                        placeholder="电影/新闻"
                        onSubmit={value => console.log(value, 'onSubmit')}
                        onClear={value => console.log(value, 'onClear')}
                        ref={ref => this.autoFocusInst = ref}
                        onFocus={this.onFocus}
                        onBlur={() => console.log('onBlur')}
                        onCancel={() => this.props.history.go(-1)}
                        onChange={this.onChange}
                        history={this.props.history}
                    />
                </div>
                {
                    this.renderList()
                }
            </div>
        );
    }
}

export default Search;
